<template>
	<scroll-view scroll-y class="order_wrap">
		<view class="order_info card">
			<view class="order_nft">
				<image class="nft_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix" />
				<view class="nft_info">
					<view class="name">藏品名称</view>
					<view class="code">藏品编号：999999</view>
					<view class="counts">发行总量：999999</view>
				</view>
			</view>
			<u-cell title="订单号" value="00000000000000000000" :border="false" :titleStyle="titleStyle"></u-cell>
			<u-cell title="时间" value="2025.02.15 11:11:11" :border="false" :titleStyle="titleStyle"></u-cell>
		</view>

		<view v-if="listModules" class="list_modules">
			<view class="title"
				>价格设置

				<view class="right">
					<uni-icons color="#666666" size="16" type="info" />
					请至少选择一项
				</view>
			</view>
			<checkbox-group @change="handleCheckGroup">
				<view class="rmb card">
					<view class="label">
						人民币
						<checkbox value="rmb" :checked="currencyType.rmb" activeBackgroundColor="#1952F8" activeBorderColor="#1952F8" iconColor="white" />
					</view>

					<input
						v-if="currencyType.rmb"
						:value="currencyValue.rmb"
						class="price_input"
						placeholder="请输入售价"
						placeholder-style="color:#666666"
						:maxlength="6"
						type="number"
						@input="rmbInput"
					/>

					<view v-if="currencyType.rmb" class="tip">最新购入价格：¥ 999999</view>
					<view v-if="currencyType.rmb" class="tip"
						>预计收入 <text class="truth_price">¥ {{ rmbPrice }} </text> （扣除4.5%手续费）</view
					>
				</view>

				<view class="yq card">
					<view class="label">
						元气
						<checkbox value="yq" :checked="currencyType.yq" activeBackgroundColor="#1952F8" activeBorderColor="#1952F8" iconColor="white" />
					</view>

					<input
						v-if="currencyType.yq"
						:value="currencyValue.yq"
						class="price_input"
						placeholder="请输入售价"
						placeholder-style="color:#666666"
						:maxlength="6"
						type="number"
						@input="yqInput"
					/>

					<view v-if="currencyType.yq" class="tip">最新购入价格：999999元气</view>
					<view v-if="currencyType.yq" class="tip"
						>预计收入 <text class="truth_price"> {{ yqPrice }} 元气 </text> （扣除4.5%手续费）</view
					>
				</view>
			</checkbox-group>
		</view>

		<view v-if="wantingModules" class="list_modules">
			<view class="title"
				>价格设置

				<view class="right">
					<uni-icons color="#666666" size="16" type="info" />
					请至少选择一项
				</view>
			</view>
			<checkbox-group @change="handleCheckGroup">
				<view class="rmb card">
					<view class="label">
						人民币
						<checkbox value="rmb" :checked="currencyType.rmb" activeBackgroundColor="#1952F8" activeBorderColor="#1952F8" iconColor="white" />
					</view>

					<input
						v-if="currencyType.rmb"
						:value="currencyValue.rmb"
						class="price_input"
						placeholder="请输入价格"
						placeholder-style="color:#666666"
						:maxlength="6"
						type="number"
						@input="rmbInput"
					/>

					<view v-if="currencyType.rmb" class="tip">钱包余额：¥ 999999</view>
				</view>

				<view class="yq card">
					<view class="label">
						元气
						<checkbox value="yq" :checked="currencyType.yq" activeBackgroundColor="#1952F8" activeBorderColor="#1952F8" iconColor="white" />
					</view>

					<input
						v-if="currencyType.yq"
						:value="currencyValue.yq"
						class="price_input"
						placeholder="请输入价格"
						placeholder-style="color:#666666"
						:maxlength="6"
						type="number"
						@input="yqInput"
					/>

					<view v-if="currencyType.yq" class="tip">钱包余额：999999元气</view>
				</view>
			</checkbox-group>
		</view>

		<view v-if="paymentModules" class="payment_modules">
			<view class="title">支付方式</view>
			<view class="pay card">
				<view class="label">
					{{ currencyType.rmb ? "人民币" : "元气" }}
					<view class="switch_currency" @click="switchCurrency">
						<text class="icon_font">⇋</text>
						{{ currencyType.yq ? "切换人民币支付" : "切换元气支付" }}
					</view>
				</view>

				<view class="price_input">
					{{ currencyType.rmb ? "￥ " + currencyValue.rmb : currencyValue.yq + " 元气" }}
				</view>

				<view class="tip"
					>钱包余额： {{ currencyType.rmb ? "￥" + balance.rmb : balance.yq + "元气" }}

					<text v-if="insufficient" class="insufficient">
						<uni-icons color="#FF5A5A" size="14" type="notification-filled" />
						余额不足！
					</text>


                    <text v-if="insufficient" class="topUp">立即充值</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
export default {
    props: {
		status: {
			type: Number,
			default: 0,  // 1:立即上架 2:立即求购 3:立即购买
		},
	},
	data() {
		return {
			titleStyle: {
				color: "white",
				fontWeight: "bold",
				fontSize: "24rpx",
			},
			currencyTypeList: ["rmb", "yq"],
			currencyType: {
				rmb: true,
				yq: false,
			},

			currencyValue: {
				rmb: 123456,
				yq: 789456,
			},

			balance: {
				rmb: 999999,
				yq: 100000,
			},
		};
	},

	computed: {
		rmbPrice() {
			const value = this.currencyValue.rmb;
			return value ? value * (1 - 0.045) : "--";
		},
		yqPrice() {
			const value = this.currencyValue.yq;
			return value ? value * (1 - 0.045) : "--";
		},

		insufficient() {
			if (this.currencyType.rmb) {
				return this.balance.rmb < this.currencyValue.rmb;
			} else {
				return this.balance.yq < this.currencyValue.yq;
			}
		},

        listModules() {
            return this.status === 1;
        },

        wantingModules() {
            return this.status === 2;
        },

        paymentModules() {
            return this.status === 3;
        }
	},

	methods: {
		handleCheckGroup(event) {
			const values = event.detail.value;
			console.log("values", values);

			if (!values.length) {
				this.currencyType.rmb = false;
				this.currencyType.yq = false;
			} else {
				values.forEach((type) => {
					this.currencyType[type] = true;
				});
				const unCheck = this.currencyTypeList.filter((t) => !values.includes(t));
				unCheck.forEach((type) => {
					this.currencyType[type] = false;
				});
			}
		},

		rmbInput(event) {
			const value = event.detail.value;
			this.currencyValue.rmb = Number(value);
		},
		yqInput(event) {
			const value = event.detail.value;
			this.currencyValue.yq = Number(value);
		},

		switchCurrency() {
			const obj = this.currencyType;
			[obj.rmb, obj.yq] = [obj.yq, obj.rmb];
		},
	},
};
</script>
<style lang="scss" scoped>
.order_wrap {
	width: 100%;
	height: 100%;

	.card {
		padding: 40rpx;

		width: 100%;
		height: max-content;
		background: #1b1b1b;
		border-radius: 30rpx;

		::v-deep .u-cell__body {
			padding: 0;

			.u-cell__value {
				font-size: 24rpx;
				color: #999999;
				font-weight: bold;
			}
		}
	}

	.order_info {
		.order_nft {
			width: 100%;
			height: 160rpx;
			margin-bottom: 30rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			.nft_image {
				width: 160rpx;
				border-radius: 20rpx;
			}

			.nft_info {
				text-align: left;
				color: white;
				margin-left: 20rpx;

				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.code,
				.counts {
					font-size: 28rpx;
				}
			}
		}

		::v-deep .u-cell {
			margin-top: 15rpx;
		}
	}

	.title {
		margin: 26rpx 0 16rpx 0;
		font-size: 32rpx;
		color: white;
		font-weight: bold;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			font-size: 24rpx;
			color: #999999;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.list_modules,
	.payment_modules {
		width: 100%;
		height: max-content;
	}

	.rmb,
	.yq,
	.pay {
		width: 100%;
		height: max-content;
		margin-bottom: 20rpx;
		.label {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: white;

			font-size: 32rpx;
			font-weight: bold;

			::v-deep .uni-checkbox-wrapper {
				vertical-align: baseline;
				.uni-checkbox-input {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.switch_currency {
				color: #245af8;
				font-size: 24rpx;
				font-weight: bold;

				.icon_font {
					font-size: 28rpx;
					margin-right: 8rpx;
					font-weight: bold;
					font-family: Farah;
				}
			}
		}

		.price_input {
			color: white;
			font-weight: bold;
			font-size: 48rpx;
			padding: 10rpx 0;
			border-bottom: 4rpx solid #666666;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.tip {
			font-size: 24rpx;
			font-weight: bold;
			color: white;

			margin-top: 12rpx;

            display: flex;
            justify-content: flex-start;
            align-items: center;

			.truth_price {
				color: #255bf8;
				padding: 0 6rpx;
			}

			.insufficient {
				color: #ff5a5a;
				font-size: 24rpx;
				font-weight: bold;
                margin-left: 20rpx;
			}

            .topUp {
                background-color: #2359F8;
                padding: 8rpx 20rpx;
                text-align: center;
                color: white;
                border-radius: 10rpx;
                margin-left: auto;
            }
		}
	}
}
</style>
